<template>
	<view>
		<!-- 选择城市 -->
		<u-picker :show="messageInfo.pickerdzshow" ref="uPicker" title="选择城市" keyName="text" :columns="columns" @confirm="confirm" @cancel="cancel" @change="changeHandler"></u-picker>
	</view>
</template>

<script>
	import citys from "@/static/city/city.js"
	export default {
		// 使用方法<pickercity :messageInfo="{pickerdzshow:pickerdzshow}" @surecity="surecity"></pickercity>
		// surecity(e) {
		// 	this.pickerdzshow = false
		// 	if(e){
		// 		this.cityinfo = e
		// 		this.city_text = e.provence + "/" + e.city
		// 		console.log(e,999);
		// 	}
		// },
		name: "pickercity",
		props:{
			messageInfo:{
				pickerdzshow:false
			}
		},
		data() {
			return {
				columns: [],
				columnData: [],
				city:citys.data
			};
		},
		created(){
			let _this = this
			_this.columns[0] = this.city
			_this.columns[1] = this.city[0].children
			_this.city.forEach((item,index)=>{
				this.columnData[index] = item.children
			})
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
			 } = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				let data = {
					provence:e.value[0].text,
					provenceid:e.value[0].value,
					city:e.value[1].text,
					cityid:e.value[1].value
				}
				
				this.$emit("surecity",data)
			},
			cancel(){
				this.$emit("surecity")
			},
		}
	}
</script>

<style>

</style>
